<template>
  <a-modal
    width="450px"
    v-model:visible="visible"
    :mask-closable="false"
    title="订单好评"
    @cancel="close"
    @close="close"
    unmount-on-close
    @before-open="onBeforeOpen"
  >
    <page-form layout="vertical">
      <page-form-row :gutter="24">
        <page-form-item field="endTime" label="请选择好评的订单" size="1">
          <a-select
            :options="list"
            placeholder="请选择好评的订单"
            multiple
            allow-clear
            @search="handleSearch"
            @change="handleChange"
            @popup-visible-change="onPopupVisibleChange"
            :popup-container="'#app'"
          />
        </page-form-item>
      </page-form-row>
    </page-form>
    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" @click="ok" :disabled="!selectKeys.length" :loading="loading">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { getNoEvaluateOrder, orderGoodEvaluate } from '@/api/order/sOrder'
  import { getNoEvaluateOrder as czsGetNoEvaluateOrder, orderGoodEvaluate as czsOrderGoodEvaluate } from '@/api/order/czsOrder'
  import { Notification } from '@arco-design/web-vue'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    orderType: {
      type: Number,
      default: 1, // 1: 短租 2: 长租
    },
  })

  const list = ref([])
  const selectKeys = ref<string[]>([])

  const emits = defineEmits(['update:modelValue', 'update:okLoading', 'ok'])
  const visible = computed({
    get: () => props.modelValue,
    set: (value) => emits('update:modelValue', value),
  })

  const loading = ref(false)

  const handleChange = (value: any) => {
    selectKeys.value = value
  }

  const onPopupVisibleChange = (visible: boolean) => {
    if (visible) {
      getOrderList()
    }
  }

  const getOrderList = (value?: string) => {
    const params = {
      orderCodeChannelLike: value,
    }

    if (props.orderType == 1) {
      getNoEvaluateOrder(params).then((res: any) => {
        list.value = res.result.map((item: any) => {
          return { value: item.id, label: `${item.channelTypeName} ${item.orderCode}` }
        })
      })
    } else {
      czsGetNoEvaluateOrder(params).then((res: any) => {
        list.value = res.result.map((item: any) => {
          return { value: item.id, label: `${item.orderNo}` }
        })
      })
    }
  }

  const onBeforeOpen = () => {
    getOrderList()
  }

  const handleSearch = (value: string) => {
    getOrderList(value)
  }

  const ok = () => {
    loading.value = true
    if (props.orderType == 1) {
      orderGoodEvaluate({ idList: selectKeys.value, isCancel: 0 })
        .then(() => {
          visible.value = false
          selectKeys.value = []
          Notification.success('批量好评成功')
          emits('ok')
        })
        .finally(() => {
          loading.value = false
        })
    } else {
      czsOrderGoodEvaluate({ idList: selectKeys.value, isCancel: 0 })
        .then(() => {
          visible.value = false
          selectKeys.value = []
          Notification.success('批量好评成功')
          emits('ok')
        })
        .finally(() => {
          loading.value = false
        })
    }
  }

  const close = () => {
    visible.value = false
    loading.value = false
    selectKeys.value = []
  }
</script>

<style lang="less" scoped></style>
